<template>
	<el-card shadow="never">
		<el-avatar
			icon="el-icon-user-solid"
			:size="120"
			shape="circle"
			fit="fill"
			class="avatar"
		></el-avatar>
		<p class="replace">点击更换</p>
		<div class="infoContainer">
			<el-form label-position="left" inline size="normal">
				<el-form-item class="formItem" label="用户名:">
					<el-input
						class="itemContainer"
						v-model="infoName"
						maxlength="11"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item class="formItem" label="生日:">
					<el-date-picker
						v-model="birthday"
						type="week"
						format="[Week] ww"
						placeholder="选择日期"
						class="itemContainer"
					/>
				</el-form-item>
				<el-form-item class="formItem" label="性别:">
					<el-button
						type="info"
						class="button buttonLeft active"
						size="default"
						>男</el-button
					>
					<el-button type="info" class="button" size="default"
						>女</el-button
					>
				</el-form-item>
				<el-form-item class="formItem" label="城市:">
					<el-select placeholder="请选择" class="itemContainer">
						<el-option label="北京" value="city1"> </el-option>
						<el-option label="山东" value="city2"> </el-option>
						<el-option label="河北" value="city3"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="formItem" label="成长等级:">
					<el-tag class="ml-2">lv.1</el-tag>
				</el-form-item>
				<el-form-item class="formItem" label="技能水平:">
					<el-select v-model="skillValue" class="skillContainer">
						<el-option label="零基础" value="skill1"> </el-option>
						<el-option label="业余初级" value="skill2"> </el-option>
						<el-option label="业余中级" value="skill3"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="interest" label="兴趣技能:" size="normal">
					<el-tag class="interestItem"
						>街舞
						<div @click="handler" class="interestDel">X</div>
					</el-tag>
					<el-tag class="interestItem"
						>街舞
						<div @click="handler" class="interestDel">X</div>
					</el-tag>
					<el-tag class="interestItem"
						>街舞
						<div @click="handler" class="interestDel">X</div>
					</el-tag>

					<el-button
						@click="interestHandler"
						class="interestBtn"
						type="info"
						text
						bg
						>请选择</el-button
					>
				</el-form-item>
			</el-form>
			<el-button type="danger" class="save" @click="">保存</el-button>
		</div>
		<el-dialog class="dialog" v-model="dialogControl" width="80%">
			<div class="dialogHeader">
				<p>
					<span>选择我的兴趣技能</span>
					<span class="rightSpan">3 / 7</span>
				</p>
				<p>例如舞蹈就选舞种</p>
			</div>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'

import { ref } from 'vue'

let birthday = ref()
let dialogControl = ref(false)
let skillValue = ref('skill1')
let infoName = ref('1785')

// 删除技能
let handler = () => {
	console.log(123)
}

// 点击选择技能
let interestHandler = () => {}
</script>

<style scoped>
>>> .dialog {
	position: relative;
}
.dialogHeader {
	position: absolute;
	top: 10px;
}
.dialogHeader span {
	font-size: 18px;
	color: #000;
}
.rightSpan {
	padding-left: 20px;
	color: #b1b5c1 !important;
}
>>> .avatar {
	margin-top: 26px;
}

>>> .formItem {
	width: 240px;
	margin-left: 60px;
}
>>> .button {
	height: 30px;
	width: 70px;
	background-color: #f5f7f9;
	color: #7d8090;
	border: none;
}
>>> .buttonLeft {
	margin-left: 40px;
}
>>> .active {
	background-color: #f93684;
	color: #fff;
}
>>> .itemContainer {
	height: 40px;
	width: 160px;
	margin-left: 25px;
}
>>> .skillContainer {
	height: 40px;
	width: 160px;
}
>>> .interest {
	min-width: 510px;
	margin-left: 60px;
}
>>> .save {
	height: 46px;
	width: 140px;
	background: #f93684;
	margin: 20px auto;
	display: block;
}
.interestDel {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: #fe4419;
	position: absolute;
	right: -10px;
	top: -10px;
	text-align: center;
	line-height: 20px;
	color: #fff;
}
>>> .interestItem {
	height: 40px;
	width: 100px;
	line-height: 40px;
	vertical-align: middle;
	/* margin: 0 15px 5px 0; */
	font-size: 14px;
	color: rgb(0, 0, 0);
	background-color: #fff;
	position: relative;
	margin: 0 15px 5px 0;
}
.interestBtn {
	background-color: #f5f7f9;
	color: #bbbfc9;
	border: none;
	height: 30px;
	width: 100px;
	line-height: 30px;
}
.ml-2 {
	background-color: #ff31ac;
	width: 41px;
	height: 20px;
	color: #f5f7f9;
	margin-left: 10px;
}
.avatar:hover {
	box-shadow: 0 0 5px 1px #f93684;
}
.replace {
	color: #7d8090;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
}
.infoContainer {
	box-sizing: border-box;
	min-height: 400px;
	width: 960px;
	padding: 30px 140px;
	margin: 0 auto;
}
</style>
